<template>
  <el-alert type="warning" show-icon description="首次加载，较缓慢是正常现象，请耐心等待。【注意】：不能在同一浏览器上同时登录两个账号，会引起账号间信息的错误，若需测试两个账号的互通性，需要在两个浏览器登录或在两台终端登录，只适配与PC端" title="注意事项"/>
  <div class="login-hl">
    <div class="login-box">
      <p class="login-tittle"><span>LOGIN</span></p>
      <div class="login-form">
        <el-space size="large" direction="vertical" style="width: 100%">
          <el-input type="text" placeholder="Please input your username" v-model="LoginForm.username" prefix-icon="User"
                    class="input-box"/>
          <el-input type="password" placeholder="Please input your password" v-model="LoginForm.password"
                    prefix-icon="Lock"
                    show-password class="input-box" @keyup.enter.native="Log"/>
        </el-space>
      </div>
      <div class="switch-box">
        <el-switch size="default" active-text="Remember" v-model="RemindPassword"/>
        <span class="forget-text" @click="forget">
            Forget the password
          </span>
      </div>
      <div class="submit-button">
        <el-button color="rgb(253, 84, 141)" class="login-button" @click="Log">LOGIN</el-button>
      </div>
      <div style="margin-top: 25px;user-select: none">
        <el-divider>OR</el-divider>
      </div>
      <div class="box-button">
        <div class="register-tittle">
          <span class="sing-up" @click="register">Sing Up</span>
          <span>/</span>
          <span style="padding-left: 5px" class="sing-in">Sing In</span>
        </div>
        <div class="other">
          <span @click="wx">
            <svg t="1679314818714" class="icon wx-icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 p-id="2957" width="35" height="48">
            <path
                d="M0 0m184.32 0l655.36 0q184.32 0 184.32 184.32l0 655.36q0 184.32-184.32 184.32l-655.36 0q-184.32 0-184.32-184.32l0-655.36q0-184.32 184.32-184.32Z"
                fill="#65DB79" p-id="2958"></path>
            <path
                d="M663.21408 407.02976c-128.75776 0-233.13408 87.296-233.13408 194.97984s104.37632 194.97984 233.13408 194.97984a273.85856 273.85856 0 0 0 88.79104-14.76608l66.74432 35.55328-8.98048-64.12288a183.78752 183.78752 0 0 0 86.5792-151.64416c-0.01024-107.68384-104.38656-194.97984-233.13408-194.97984z"
                fill="#FFFFFF" p-id="2959"></path>
            <path
                d="M404.48 194.56c137.0112 0 250.28608 83.968 276.16256 195.2768-48.82432-4.01408-302.08 23.27552-261.85728 271.36-36.4032 0.1024-86.016-1.49504-121.5488-13.4656l-80.62976 42.97728 10.8544-77.45536C164.7104 571.7504 122.88 505.00608 122.88 430.08c0-130.048 126.07488-235.52 281.6-235.52z"
                fill="#FFFFFF" p-id="2960"></path>
            <path d="M313.344 352.256m-36.864 0a36.864 36.864 0 1 0 73.728 0 36.864 36.864 0 1 0-73.728 0Z"
                  fill="#65DB79" p-id="2961"></path>
            <path d="M497.664 352.256m-36.864 0a36.864 36.864 0 1 0 73.728 0 36.864 36.864 0 1 0-73.728 0Z"
                  fill="#65DB79" p-id="2962"></path>
            <path d="M585.728 544.768m-32.768 0a32.768 32.768 0 1 0 65.536 0 32.768 32.768 0 1 0-65.536 0Z"
                  fill="#65DB79" p-id="2963"></path>
            <path d="M741.376 544.768m-32.768 0a32.768 32.768 0 1 0 65.536 0 32.768 32.768 0 1 0-65.536 0Z"
                  fill="#65DB79" p-id="2964"></path>
          </svg>
          </span>
          <span @click="qq">
            <svg t="1679315002604" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="7745" width="35" height="48">
            <path
                d="M511.09761 957.257c-80.159 0-153.737-25.019-201.11-62.386-24.057 6.702-54.831 17.489-74.252 30.864-16.617 11.439-14.546 23.106-11.55 27.816 13.15 20.689 225.583 13.211 286.912 6.767v-3.061z"
                fill="#FAAD08" p-id="7746"></path>
            <path
                d="M496.65061 957.257c80.157 0 153.737-25.019 201.11-62.386 24.057 6.702 54.83 17.489 74.253 30.864 16.616 11.439 14.543 23.106 11.55 27.816-13.15 20.689-225.584 13.211-286.914 6.767v-3.061z"
                fill="#FAAD08" p-id="7747"></path>
            <path
                d="M497.12861 474.524c131.934-0.876 237.669-25.783 273.497-35.34 8.541-2.28 13.11-6.364 13.11-6.364 0.03-1.172 0.542-20.952 0.542-31.155C784.27761 229.833 701.12561 57.173 496.64061 57.162 292.15661 57.173 209.00061 229.832 209.00061 401.665c0 10.203 0.516 29.983 0.547 31.155 0 0 3.717 3.821 10.529 5.67 33.078 8.98 140.803 35.139 276.08 36.034h0.972z"
                fill="#000000" p-id="7748"></path>
            <path
                d="M860.28261 619.782c-8.12-26.086-19.204-56.506-30.427-85.72 0 0-6.456-0.795-9.718 0.148-100.71 29.205-222.773 47.818-315.792 46.695h-0.962C410.88561 582.017 289.65061 563.617 189.27961 534.698 185.44461 533.595 177.87261 534.063 177.87261 534.063 166.64961 563.276 155.56661 593.696 147.44761 619.782 108.72961 744.168 121.27261 795.644 130.82461 796.798c20.496 2.474 79.78-93.637 79.78-93.637 0 97.66 88.324 247.617 290.576 248.996a718.01 718.01 0 0 1 5.367 0C708.80161 950.778 797.12261 800.822 797.12261 703.162c0 0 59.284 96.111 79.783 93.637 9.55-1.154 22.093-52.63-16.623-177.017"
                fill="#000000" p-id="7749"></path>
            <path
                d="M434.38261 316.917c-27.9 1.24-51.745-30.106-53.24-69.956-1.518-39.877 19.858-73.207 47.764-74.454 27.875-1.224 51.703 30.109 53.218 69.974 1.527 39.877-19.853 73.2-47.742 74.436m206.67-69.956c-1.494 39.85-25.34 71.194-53.24 69.956-27.888-1.238-49.269-34.559-47.742-74.435 1.513-39.868 25.341-71.201 53.216-69.974 27.909 1.247 49.285 34.576 47.767 74.453"
                fill="#FFFFFF" p-id="7750"></path>
            <path
                d="M683.94261 368.627c-7.323-17.609-81.062-37.227-172.353-37.227h-0.98c-91.29 0-165.031 19.618-172.352 37.227a6.244 6.244 0 0 0-0.535 2.505c0 1.269 0.393 2.414 1.006 3.386 6.168 9.765 88.054 58.018 171.882 58.018h0.98c83.827 0 165.71-48.25 171.881-58.016a6.352 6.352 0 0 0 1.002-3.395c0-0.897-0.2-1.736-0.531-2.498"
                fill="#FAAD08" p-id="7751"></path>
            <path
                d="M467.63161 256.377c1.26 15.886-7.377 30-19.266 31.542-11.907 1.544-22.569-10.083-23.836-25.978-1.243-15.895 7.381-30.008 19.25-31.538 11.927-1.549 22.607 10.088 23.852 25.974m73.097 7.935c2.533-4.118 19.827-25.77 55.62-17.886 9.401 2.07 13.75 5.116 14.668 6.316 1.355 1.77 1.726 4.29 0.352 7.684-2.722 6.725-8.338 6.542-11.454 5.226-2.01-0.85-26.94-15.889-49.905 6.553-1.579 1.545-4.405 2.074-7.085 0.242-2.678-1.834-3.786-5.553-2.196-8.135"
                fill="#000000" p-id="7752"></path>
            <path
                d="M504.33261 584.495h-0.967c-63.568 0.752-140.646-7.504-215.286-21.92-6.391 36.262-10.25 81.838-6.936 136.196 8.37 137.384 91.62 223.736 220.118 224.996H506.48461c128.498-1.26 211.748-87.612 220.12-224.996 3.314-54.362-0.547-99.938-6.94-136.203-74.654 14.423-151.745 22.684-215.332 21.927"
                fill="#FFFFFF" p-id="7753"></path>
            <path
                d="M323.27461 577.016v137.468s64.957 12.705 130.031 3.91V591.59c-41.225-2.262-85.688-7.304-130.031-14.574"
                fill="#EB1C26" p-id="7754"></path>
            <path
                d="M788.09761 432.536s-121.98 40.387-283.743 41.539h-0.962c-161.497-1.147-283.328-41.401-283.744-41.539l-40.854 106.952c102.186 32.31 228.837 53.135 324.598 51.926l0.96-0.002c95.768 1.216 222.4-19.61 324.6-51.924l-40.855-106.952z"
                fill="#EB1C26" p-id="7755"></path>
          </svg>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {login} from "../server/api.js";
import {ElMessage, ElMessageBox, ElNotification} from "element-plus";
import {Key, LoginUserName, LoginUserPassword} from "../System/SystemContant.js";
import JsCookie from "js-cookie";
import router from "../router/index.js";

onMounted(() => {
  LoginForm.username = JsCookie.get(LoginUserName)
  LoginForm.password = JsCookie.get(LoginUserPassword)
})

const LoginForm = reactive({
  username: '',
  password: ''
})

const RemindPassword = ref(true)

function Log() {
  login(LoginForm).then((res) => {
    if (res.result.status === 200) {
      router.push('/chat')
      localStorage.setItem(Key, res.result.data.token)
      if (RemindPassword.value) {
        JsCookie.set("id",res.result.data.id)
        JsCookie.set(LoginUserName, LoginForm.username)
        JsCookie.set(LoginUserPassword, LoginForm.password)
        JsCookie.set("tick",res.result.data.tick)
        JsCookie.set("icon",res.result.data.image)
      }
      ElNotification.success({
        message: res.result.message,
        position: 'top-left'
      })
      return
    }
    ElNotification.error({
      message: res.result.message,
      position: 'top-left'
    })
  }, error => {
    if (error.response.data) {
      ElNotification.error({
        message: error.response.data.result.message,
        position: "top-left"
      })
      return
    }
    ElNotification.warning({
      message: '服务器繁忙，请稍后再试',
      position: "top-left"
    })
  })
}

ElMessageBox.confirm(
    '欢迎来到chat 2.2，使用前请阅读注意事项',
    'WelCome',
    {
      confirmButtonText:'确认',
      cancelButtonText: '取消',
      type: 'warning'
    },
).then(()=>{
  ElMessage({
    type: 'success',
    message: '确认阅读'
  })
}).catch(()=>{
  ElMessage({
    type: 'info',
    message: '请认真阅读注意事项'
  })
})

function register(){
  ElMessage.error("管理员已关闭注册")
}

function forget(){
  ElMessage.error("已关闭该功能，忘记密码请与管理员联系")
}

function wx(){
  ElMessage.info("功能正在完善，请用账号密码登录")
}

function qq(){
  ElMessage.info("功能正在完善，请用账号密码登录")
}

</script>

<style scoped>

.login-hl {
  width: 100%;
  height: 100%;
  background-image: url("../assets/loginBG.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  display: flex;
  align-items: center;
}

.login-box {
  background-color: white;
  width: 400px;
  height: 400px;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 1px #eeebeb;
  margin-left: 10rem;
  opacity: 0.8;
  padding: 50px 30px 30px 30px;
  user-select: none;
}

.login-tittle {
  font-size: 20px;
  margin: 0;
  letter-spacing: 0.5em;
}

.login-form {
  margin-top: 40px;
}

.input-box {
  width: 400px;
  height: 45px;
  font-size: 14px;
}

.switch-box {
  width: 100%;
  user-select: none;
}

.forget-text {
  margin-left: 9.5em;
  cursor: pointer;
  font-size: 14px;
}

.forget-text:hover {
  color: #2e86ee;
}

.submit-button {
  width: 100%;
  text-align: center;
  margin-top: 2em;
}

.login-button {
  color: white;
  width: 250px;
  height: 40px;
}

.register-tittle {
  text-align: center;
  font-size: 14px;
  user-select: none;
}

.sing-in {
  padding-left: 5px;
  cursor: pointer;
}

.sing-in:hover {
  color: #2e86ee;
}

.sing-up {
  padding-right: 5px;
  cursor: pointer;
}

.sing-up:hover {
  color: #2e86ee;
}

.other {
  text-align: center;
  margin-top: 15px;
}

.wx-icon {
  margin-right: 15px;
}

.icon {
  cursor: pointer;
}
</style>